<template>
  <div class="app-container">
    <el-form :inline="true" :mode="searchForm" class="demo-form-inline">
      <el-form-item label="用户名称">
        <el-input v-model="searchForm.searchTitle" placeholder="作业标题" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="searchJob">查询</el-button>
        <el-button type="primary" @click="addJobVisible = true">新增</el-button>
      </el-form-item>
    </el-form>
    <!-- 表格 -->
    <el-table
      :data="data.records"
      border
      fit
      highlight-current-row
      :header-cell-style="{
        background: '#f2f3f4',
        color: '#555',
        'font-weight': 'bold',
        'line-height': '32px',
      }"
    >
      <el-table-column align="center" type="selection" width="55" />
      <el-table-column fixed label="序号" align="center" width="80">
        <template slot-scope="scope">{{ scope.$index + 1 }}</template>
      </el-table-column>
      <el-table-column prop="realName" label="用户名称" align="center" />
      <el-table-column prop="score" label="分数" align="center" >
        <template slot-scope="{ row }">
            <span v-if="row.state==1">{{ row.score }}</span>
            <span v-else >暂未评分</span>
      </template>
      </el-table-column>    
      <el-table-column prop="createTime" label="提交时间" align="center" />
      <el-table-column fixed="right" label="操作" align="center">
        <template slot-scope="{ row }">
          <el-button
            type="text"
            v-if="row.state==0"
            size="small"
            style="color: green; font-size: 14px"
            @click="mark(row)"
            >打分</el-button
          >
          <el-button
            type="text"
            v-else
            size="small"
            style="color: green; font-size: 14px"
            @click="showRow(row)"
            >查看详情</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="pagination-container">
      <el-pagination
        :current-page="data.current"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="data.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="data.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

    <jobDialog
      v-model="addJobVisible"
      title="新增公告"
      :is-edit="true"
      :on-confirm="addJob"
      :edit-type="1"
    />
    <!-- <jobDialog
        v-model="editVisible"
        title="编辑公告"
        :is-edit="true"
        :on-confirm="updateJob"
        :dialog-data="form"
      />
      <jobDialog
        v-model="showVisible"
        title="查看公告"
        :is-edit="false"
        :dialog-data="form"
      /> -->
  </div>
</template>

<script>
import { getJobDetails } from "@/api/job";
import jobDialog from "@/components/job/jobDialog/index";
import ClassSelect from "@/components/ClassSelect";
import { getTeacherJobPage } from "@/api/job";
export default {
  components: {
    jobDialog,
    ClassSelect,
  },
  data() {
    return {
      pageNum: 1,
      pageSize: 10,
      data: {},
      row:{},
      searchForm: {
        searchTitle: "",
        gradeId: null,
      },
      showVisible: false,
      addJobVisible: false,
      editVisible: false,
      form: {
        content: "",
        title: "",
        gradeIds: [],
      },
    };
  },
  created() {
    this.row = this.$route.query.row;
    this.getJobPage();
  },
  methods: {
    // 分页查询
    async getJobPage(pageNum, pageSize) {
      const params = {
        pageNum: pageNum,
        pageSize: pageSize,
        jobId: this.row.id,
      };
      const res = await getJobDetails(params);
      this.data = res.data;
    },
    mark(row) {
            if(row.state){
            this.$message({
                type: "info",
                message: "已评分，不能查看作业详情",
            });
            return;
        }
        this.$router.push({ name: "teacherUserJobDetails", query: { row: row } });
    },
    // 查看公告按钮
    showRow(row) {
        this.$router.push({ name: "teacherUserJobDetails", query: { row: row } });
    },

    // 新增公告
    addJob(JobForm) {
      // 建立公告数据
      const data = {
        title: JobForm.title,
        content: JobForm.content,
        gradeId: JobForm.gradeId,
      };
      JobAdd(data).then((res) => {
        if (res.code) {
          // 刷新公告数据，关闭新增公告弹窗
          this.getJobPage(this.pageNum, this.pageSize);
          this.addJobVisible = false;
          this.$message({
            type: "success",
            message: "新增成功!",
          });
        } else {
          this.$message({
            type: "info",
            message: res.msg,
          });
        }
      });
    },
    // 更新公告方法
    updateJob(JobForm) {
      const data = {
        title: JobForm.title,
        content: JobForm.content,
        gradeIds: JobForm.gradeIds.join(","),
        isPublic: JobForm.isPublic ? 1 : 0,
      };
      JobUpdate(this.form.id, data).then((res) => {
        if (res.code) {
          this.getJobPage(this.pageNum, this.pageSize);
          this.editVisible = false;
          this.$message({
            type: "success",
            message: "编辑成功!",
          });
        } else {
          this.$message({
            type: "info",
            message: res.msg,
          });
        }
      });
    },
    // 搜索公告
    searchJob() {
      this.getJobPage(
        this.pageNum,
        this.pageSize,
        this.searchForm.searchTitle,
        this.searchForm.gradeId
      );
    },
    // 删除公告
    delJob(id) {
      this.$confirm("此操作将永久删除该公告, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then(() => {
          JobDel(id).then((res) => {
            if (res.code) {
              this.getJobPage(this.pageNum, this.pageSize);
              this.$message({
                type: "success",
                message: "删除成功!",
              });
            }
          });
        })
        .catch((error) => {
          // 明确捕获并检查reject的原因
          if (error === "cancel") {
            // 特别处理取消的情况，避免将其视为错误
            this.$message({
              type: "info",
              message: "已取消操作",
            });
          } else {
            // 如果是其他错误，可以在这里处理
            console.error("发生了一个错误:", error);
          }
        });
    },

    handleSizeChange(val) {
      // 设置每页多少条逻辑
      this.pageSize = val;
      this.getJobPage(this.pageNum, val);
    },
    handleCurrentChange(val) {
      // 设置当前页逻辑
      this.pageNum = val;
      this.getJobPage(val, this.pageSize);
    },
  },
};
</script>

<style></style>
